<template>
  <el-dialog
    title="菜单"
    :visible="matrix"
    @close="del"
  >
    <el-form
      ref="formMenuLIst"
      :inline="true"
      :model="formData"
      :rules="rules"
    >
      <el-row
        type="flex"
        justify="start"
        style="margin-left: 9px"
      >
        <el-form-item v-if="addState" label="菜单类型">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="menu" @click="tabPosition === 'menu'">菜单</el-radio-button>
            <el-radio-button label="button" @click="tabPosition === 'button'">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <div v-if="tabPosition === 'menu'">
        <el-row
          type="flex"
          justify="space-between"
        >
          <el-form-item
            label="菜单名称"
            prop="permission_name"
          >
            <el-input
              v-model="formData.permission_name"
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item
            label="菜单地址"
            prop="route"
          >
            <el-input
              v-model="formData.route"
              style="width: 320px"
            />
          </el-form-item>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
          style="margin-left: 9px"
        >
          <el-form-item
            label="组件地址"
            prop="component"
          >
            <el-input
              v-model="formData.component"
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item
            label="权限地址"
            prop="permission_mark"
          >
            <el-input
              v-model="formData.permission_mark"
              style="width: 320px"
            />
          </el-form-item>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
          style="margin-left: 9px"
        >
          <el-form-item
            label="菜单图标"
            prop="icon"
          >
            <el-input
              v-model="formData.icon"
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item
            label="Redirect"
            prop="redirect"
          >
            <el-input
              v-model="formData.redirect"
              style="width: 320px"
            />
          </el-form-item>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
          style="margin-left: 9px"
        >
          <el-form-item
            label="是否外链"
            prop="islink"
          >
            <el-radio
              v-model="formData.islink"
              :label="1"
            >是</el-radio>
            <el-radio
              v-model="formData.islink"
              :label="2"
            >否</el-radio>
          </el-form-item>
          <el-row
            type="flex"
            justify="start"
            style="width:395px"
          >
            <el-col>
              <el-form-item
                label="排序"
                prop="sort"
              >
                <el-input-number
                  v-model="formData.sort"
                  :min="1"
                  :max="10"
                  label="描述文字"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
          style="margin-left: 9px"
        >
          <el-form-item
            label="是否显示"
            prop="hidden"
          >
            <el-radio
              v-model="formData.hidden"
              :label="1"
            >是</el-radio>
            <el-radio
              v-model="formData.hidden"
              :label="2"
            >否</el-radio>
          </el-form-item>
          <el-row
            type="flex"
            justify="start"
            style="width:395px"
          >
            <el-col>
              <el-form-item
                label="KeepAlive"
                prop="keepalive"
              >
                <el-radio
                  v-model="formData.keepalive"
                  :label="1"
                >是</el-radio>
                <el-radio
                  v-model="formData.keepalive"
                  :label="2"
                >否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </div>
      <div v-else>
        <el-row type="flex" justify="space-between">
          <el-form-item
            label="按钮名称"
            prop="permission_name"
          >
            <el-input
              v-model="formData.permission_name"
              style="width: 320px"
            />
          </el-form-item>
          <el-form-item
            label="权限标识"
            prop="permission_mark"
          >
            <el-input
              v-model="formData.permission_mark"
              style="width: 320px"
            />
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="space-betwwen" style="margin-left: 36px">
          <el-form-item
            label="排序"
            prop="sort"
          >
            <el-input-number
              v-model="formData.sort"
              :min="1"
              :max="10"
              label="描述文字"
            />
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <el-row
      slot="footer"
      type="flex"
      justify="end"
    >
      <el-col :span="6">
        <el-button
          size="small"
          @click="del"
        >取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="btnOK"
        >确认</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addMenuData, getMenuDataAccordingToId, editMenuDataAccordingToId } from '@/api/permission_menu'
export default {
  name: 'MenuList',
  props: {
    Id: {
      type: Number,
      default: null
    },
    matrix: { // 弹窗的状态
      type: Boolean,
      required: true
    },
    addState: {
      type: Boolean,
      required: true
    },
    echo: {
      type: Boolean,
      required: true
    }
  },
  data() {
    const FormData = {
      permission_name: '',
      route: '',
      component: '',
      permission_mark: '',
      icon: '',
      redirect: '',
      islink: 1, // 1是外链,2是不外链
      sort: 10,
      hidden: 2, // 1是显示,2是不显示
      keepalive: 1, // 1 是, 2 否
      type: 1 // 1 菜单权限 2 按钮权限
    }
    return {
      formData: {
        ...FormData
      },
      rules: {
        permission_name: [
          { required: true, message: '爬爬爬', trigger: 'blur' }
        ],
        route: [
          { required: true, message: '爬爬爬', trigger: 'blur' }
        ],
        permission_mark: [
          { required: true, message: '爬爬爬', trigger: 'blur' }
        ]
      },
      tabPosition: 'menu'
    }
  },
  methods: {
    // 取消事件
    del() {
      this.formData = {
        ...this.FormData
      }
      console.log(1)
      this.$emit('update:matrix', false)
      this.$emit('update:add-state', false)
    },
    // 提价事件
    async btnOK() {
      try {
        await this.$refs.formMenuLIst.validate()
        if (this.addState) {
          // 子级菜单或按钮权限
          if (this.tabPosition === 'menu') {
            // 菜单权限
            await addMenuData({
              ...this.formData,
              parent_id: this.Id
            })
          } else if (this.tabPosition === 'button') {
            console.log(55)
            // 按钮权限
            await addMenuData({
              ...this.formData,
              parent_id: this.Id,
              type: 2
            })
          }
        }
        if (!this.addState && this.matrix) {
          if (this.echo) {
            // 编辑事件
            await editMenuDataAccordingToId(this.formData)
          } else {
            // 新增事件
            await addMenuData({
              ...this.formData,
              parent_id: 0
            })
          }
        }
        this.$message.success('操作成功')
        this.$parent.getPermissionData()
        this.$emit('update:matrix', false)
        this.$emit('update:add-state', false)
      } catch (err) {
        console.log(err)
      }
    },
    // 回显数据
    async echoData(id) {
      const { data } = await getMenuDataAccordingToId(id)
      this.formData = {
        ...data
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 30px 40px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    border-radius: 4px 0 0 4px;
    box-shadow: none!important;
}
</style>
